<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <title>title</title>
        <link rel="stylesheet" type="text/css" href="../css/api.css"/>
        <style media="screen">
        body {
            padding-top: 1.5rem;
        }

        .header {
            width: 93%;
            height: 2.5rem;
            padding: 0.5rem 0.8rem 0.2rem 0.8rem;
            color: #fff;
            line-height: 2.5rem;
            position: fixed;
            top:1.5rem;
            background-color: #40cccc;
        }

        .header ul {
            width: 60%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }

        .header ul li {
            width: 449%;
            text-align: center;
            float: left;
        }

        .header ul li a {
            color: #fff;
            text-decoration: none;
            font-weight: bold;
        }
      #nice{
        border-bottom: 0.2rem solid orange;
      }
      .img{
        width: 100%;
        height: 20%;
      }
      .img img{
        width: 100%;
        height: 100%；
      }
      .nav{
        width: 93%;
        padding: 0.5rem 0.8rem;
        height: 3.5rem;
        line-height: 1.7rem;
        border-bottom:0.5rem solid rgb(200, 200, 200, 0.5);
      }
      .nav p{
        color: #ccc;
        font-size: 0.9rem;

      }
      .cont{
        width: 100%;
        height: 100vh;
        margin-top: 3rem;
      }
      .cont_one{
        width: 100%;
        margin-bottom: 1rem;
        background-color: #fff;
      }
      .imgs{
        position: absolute;
      }
      .pic_text {
          width: 93%;
          height: 2rem;
          line-height: 2rem;
          padding: 0.5rem 0.8rem;
          background-color: rgb(0, 0, 0, 0.2);
          position: absolute;
          z-index: 999;
          top:0%;
          color: #ffc93e;
          text-align: right;
      }
        </style>
    </head>
    <body>
      <div class="header">
          <ul>
              <li><a href="#">我的圈子</a></li>
              <li><a href="#" id="nice">人气推荐</a></li>
          </ul>
      </div>
    <div class="cont">
      <div class="cont_one">
        <div class="img">
          <img src="../image/u11.png" alt="">
        </div>
        <div class="nav">
          <h4>童趣儿童故事大赛</h4>
          <p>已有1456人参加</p>
        </div>
      </div>
      <div class="cont_one">
        <div class="img">
          <img src="../image/u33.png" alt="">
        </div>
        <div class="nav">
          <h4>童趣儿童故事大赛</h4>
          <p>已有1456人参加</p>
        </div>
      </div>
      <div class="cont_one imgs">
        <div class="img">
          <img src="../image/u11.png" alt="">
        </div>
        <div class="pic_text">
          15天后结束
        </div>
        <div class="nav">
          <h4>童趣儿童故事大赛</h4>
          <p>已有1456人参加</p>
        </div>
      </div>
    </div>

    </body>
    <script type="text/javascript" src="../script/api.js"></script>
      <script type="text/javascript" src="../script/common.js"></script>
    <script type="text/javascript">
        apiready = function(){

        };
    </script>
    </html>
